<template>
  <div class="login_container">
    <!-- 登录框 -->
    <div class="login_box">
      <!-- logo -->
      <div align="center" class="welcome">WELCOME</div>
      <!-- 表单区域 -->
      <el-form
        ref="loginFormRef"
        :rules="loginRules"
        :model="loginForm"
        class="login_form"
        label-width="0"
      >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            type="password"
            show-password
            clearable
            @keyup.enter.native="login()"
          ></el-input>
        </el-form-item>
        <!--                 
                    <el-checkbox v-model="rememberme">记住密码</el-checkbox>
                    <el-link class="forgetpsw" type="primary" @click="dialogVisible = true">忘记密码？</el-link>
                    <el-dialog title="找回密码" ><span>这是一段信息</span></el-dialog>
                 -->
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="success" @click="login()" :disabled="login_status">登录</el-button>
          <el-button type="info" @click="resetLoginForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { loginApi } from '@/api/login'
import { setToken } from '@/utils/auth'
import { resetRouter } from '@/router/index'
import { throttle } from '@/assets/js/debounce'
export default {
  data() {
    return {
      //表单数据对象
      rememberme: false,
      dialogVisible: false,
      loginForm: {
        username: "",
        password: "",
        note: '1',
      },
      login_status: false,
      //验证对象
      loginRules: {
        //校验用户名
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }, //必填项校验
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          }, //长度校验
        ],
        //校验密码
        password: [
          { required: true, message: "请输入密码", trigger: "blur" }, //必填项校验
          {
             min: 2,
             max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          }, //长度校验
        ],
      },
    };
  },
  methods: {
    //重置表单内容
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    resetRoutes(){
      resetRouter()
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error('请输入用户名或密码');
        loginApi(this.loginForm).then(res => {
          this.login_status = true
          setTimeout(() => {
            this.login_status = false
          }, 2000);
          setToken(res.data.token)//将res的token写入localStorage
          this.$message.success("登陆成功"); //信息提示
          this.$router.push({ path: "/home/index" }); //页面跳转
          this.$store.dispatch('user/getUserInfo');
          let username = this.loginForm.username
          sessionStorage.setItem('username',username)
          
          })
      });
    },
  },
created() {
  this.$store.commit('user/RESET_STATE')
  this.resetRoutes()
},
};
</script>
<style lang="less" scoped>
// 根节点样式
.login_container {
  height: 100%;
  background: url(../assets/images/bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.login_box {
  width: 400px;
  height: 300px;
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur();
  backdrop-filter: blur();
  border-radius: 8px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -30%);
  border-block: 20px;
  .btns {
    display: flex;
    justify-content: flex-end;
  }
  .forgetpsw {
    float: right;
  }
  .login_form {
    position: absolute;
    bottom: 0%;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .welcome{
    margin-top: 20px;
    font-size: 30px;
    color:#023E66;
    font-family: 华文行楷;
    font-weight: 600;
  }
}
</style>